<!--
档案详情
-->
<template>
  <div class="greyRecord">
    <div class="title mb-50">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/zhinengyewu/libraryRecord' }">{{
          $t("route.renyuandangan")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ lib_name }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          $t("route.danganxiangqing")
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="divider"></div>
    <div class="content d-flex">
      <div class="content-left d-flex flex-column jc-start ai-center">
        <div style="width: 100%">
          <i class="el-icon-back" @click="goback"></i>
        </div>
        <MyImage :src="record.img_path || record.snap_path"></MyImage>
        <div
          v-if="lib_id !== MOSHENGREN_ID"
          class="content-left-detailinfo d-flex flex-column jc-around ai-start"
        >
          <div>
            <span>{{ $t("common.person_name") }}</span>
            <span>{{ record.person_name }}</span>
          </div>
          <div>
            <span>{{ $t("common.person_age") }}</span>
            <span>{{ record.person_age }}</span>
          </div>
          <div>
            <span>{{ $t("common.person_gender") }}</span>
            <span>{{ record.person_gender }}</span>
          </div>
          <div class="d-flex">
            <span>{{ $t("common.person_idcard") }}</span>
            <span>{{ record.person_idcard }}</span>
            <ValidatePwdPopover
              v-if="isIdShow"
              :personInfo="record"
              @confirm="
                (res) => getEncryptInfo(res, 'person_idcard', 'isIdShow')
              "
            />
          </div>
          <div class="d-flex">
            <span>{{ $t("common.person_addr") }}</span>
            <span>{{ record.person_addr }}</span>
            <ValidatePwdPopover
              v-if="isAddrShow"
              :personInfo="record"
              @confirm="
                (res) => getEncryptInfo(res, 'person_addr', 'isAddrShow')
              "
            />
          </div>
        </div>
        <div
          v-else
          class="content-left-detailinfo d-flex flex-column jc-around ai-start"
        >
          <div>
            <span>{{ $t("通道名称") }}</span>
            <span>{{ record.camera_name }}</span>
          </div>
          <div>
            <span>{{ $t("抓拍时间") }}</span>
            <span>{{ record.trigger }}</span>
          </div>
          <div>
            <span>{{ $t("年龄") }}</span>
            <span>{{
              record.face_attr.st_age_value &&
              Math.round(record.face_attr.st_age_value)
            }}</span>
          </div>
          <div>
            <span>{{ $t("common.person_gender") }}</span>
            <span>{{
              this.$t(`faceCode.${record.face_attr.gender_code}`)
            }}</span>
          </div>
          <div>
            <span>{{ $t("face_mustache") }}</span>
            <span>{{
               this.$t(`faceCode.${record.face_attr.mustache_style}`)
            }}</span>
          </div>
          <div>
            <span>{{ $t("face_glasses") }}</span>
            <span>{{
               this.$t(`faceCode.${record.face_attr.glass_style}`)
            }}</span>
          </div>
          <div>
            <span>{{ $t("renlianjiance.cap") }}</span>
            <span>{{
               this.$t(`faceCode.${record.face_attr.cap_style}`)
            }}</span>
          </div>
        </div>
      </div>
      <div class="v-divider"></div>
      <div class="content-right flex-1">
        <div class="content-right-header">
          <el-form inline :model="formData">
            <el-form-item :label="$t('zhuapaijilu.shaixuantiaojian')">
              <MyDatePicker v-model="formData.start_time"> </MyDatePicker>
            </el-form-item>
            <el-form-item :label="$t('zhuapaijilu.zhi')">
              <MyDatePicker v-model="formData.stop_time"> </MyDatePicker>
            </el-form-item>
            <el-form-item>
              <CameraSelect v-model="formData.channels" />
            </el-form-item>
            <el-form-item>
              <MyButton class="confirm" @click="search">{{
                $t("common.confirmQueding")
              }}</MyButton>
              <MyButton
                className="export"
                icon="el-icon-download"
                @click="handleExportAll"
              >
                {{ $t("common.allExport") }}</MyButton
              >
              <MyButton
                className="export"
                icon="el-icon-download"
                @click="handleExport"
              >
                {{ $t("common.export") }}</MyButton
              >
              <el-checkbox
                border
                class="select-all"
                v-model="checkedAll"
                :indeterminate="isIndeterminate"
                @change="handleSelectAll"
                >{{ $t("common.selectAll") }}</el-checkbox
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="card-wrapper mt-20 d-flex jc-start ai-start">
          <Card
            class="mr-20 mb-20"
            v-for="(item, index) in cardList"
            :key="index"
            :cardData="item"
            @click.native="handleSelect(item)"
            @dblclick.native="handleShowDetail(item)"
          />
          <NoData v-if="cardList.length === 0" />
        </div>
        <Pagination
          v-show="total_num > 10"
          :total="total_num"
          :page.sync="pageNumber"
          :limit.sync="qry_len"
          class="pagingStyle"
          @pagination="getStaffList()"
        />
      </div>
    </div>
    <SingleExportDialog
      :zippasswd.sync="zippasswd"
      @confirm="confirmSingle"
      @cancel="cancelSingle"
      :visible.sync="isSingleExportShow"
      :step="singleStep"
    />
    <MultipleExportDialog
      :zippasswd="zippasswd"
      :num="total_num"
      @confirm="confirmBatch"
      @cancel="cancelBatch"
      :visible.sync="isBatchExportShow"
      :step="batchStep"
    />
    <StaffDetail :visible.sync="isDetailShow" :row="row" />
  </div>
</template>

<script>
import StaffDetail from "@/views/zhuapaijilu/faceRecord/Detail.vue";
import SingleExportDialog from "@/components/SingleExportDialog.vue";
import MultipleExportDialog from "@/components/MultipleExportDialog.vue";
import Card from "./Card";
import MyButton from "@/components/Button";
import { getStaffList, getStaffDetail } from "./service";
import ValidatePwdPopover from "@/components/ValidatePwdPopover";
import Pagination from "@/components/Pagination";
import MyDatePicker from "@/components/DatePicker";
import { validatePwd, downLoadUrl } from "@/services";
import CameraSelect from "@/components/select/Camera";
import MyImage from "@/components/Image";
import moment from "moment";
import { MOSHENGREN_ID } from "@/utils/CONSTANT";
export default {
  components: {
    MyButton,
    Card,
    SingleExportDialog,
    MultipleExportDialog,
    Pagination,
    ValidatePwdPopover,
    MyDatePicker,
    CameraSelect,
    MyImage,
    StaffDetail,
  },
  data() {
    return {
      row: {},
      MOSHENGREN_ID,
      isDetailShow: false,
      zippasswd: "",
      singleStep: 0,
      batchStep: 0,
      record: {},
      qry_len: 50,
      pageNumber: 1,
      total_num: 0,
      isSingleExportShow: false,
      isBatchExportShow: false,
      cardList: [],
      isAddrShow: true,
      isIdShow: true,
      formData: {
        channels: [],
        start_time: moment()
          .startOf("day")
          .subtract(7, "days")
          .format("YYYY-MM-DD HH:mm:ss"),
        stop_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
      },
      checkedAll: false,
      isIndeterminate: false,
    };
  },
  watch: {
    cardList: {
      handler(val) {
        if (val.length === 0) return;
        let allChecked = true;
        let allNoChecked = true;
        val.forEach((item) => {
          if (!item.isSelect) {
            allChecked = false;
          } else {
            allNoChecked = false;
          }
        });
        this.checkedAll = allChecked;
        this.isIndeterminate = !allNoChecked && !allChecked;
      },
      deep: true,
    },
  },
  mounted() {
    const params = this.$route.query;
    if (params) {
      Object.keys(params).forEach((key) => {
        this[key] = params[key];
      });
      this.lib_id = Number(this.lib_id);
      this.lib_name = this.lib_name || this.$t("route.moshengrenku");
      this.getStaffDetail();
      this.search();
    } else {
      this.$router.push({ name: "greyList" });
    }
  },
  computed: {
    selectedList() {
      return this.cardList.filter((item) => item.isSelect);
    },
    start_no: {
      get() {
        return 1 + this.qry_len * (this.pageNumber - 1);
      },
    },
  },
  methods: {
    handleShowDetail(item) {
      // 显示人脸详情
      this.isDetailShow = true;
      this.row = { ...item };
    },
    goback() {
      if (this.lib_id !== MOSHENGREN_ID) {
        this.$router.push({
          name: "recordTargets",
          query: { lib_id: this.lib_id, lib_name: this.lib_name },
        });
      } else {
        this.$router.push({
          name: "greyList",
        });
      }
    },
    search() {
      this.pageNumber = 1;
      this.$nextTick(() => {
        this.getStaffList();
      });
    },
    async getStaffDetail() {
      const params = {
        lib_id: this.lib_id,
        snap_id: this.id,
      };
      const res = await getStaffDetail(params);
      if (res.code == 0) {
        this.record = res.data.record[0];
      }
    },
    async getStaffList() {
      const params = {
        ...this.formData,
        channels:
          (this.formData.channels && this.formData.channels.join(",")) ||
          void 0,
        lib_id: this.lib_id,
        person_id: this.id,
        qry_len: this.qry_len,
        start_no: this.start_no,
      };
      const res = await getStaffList(params);
      if (res.code == 0) {
        this.cardList = res.data.record;
        this.total_num = res.data.total_num;
      }
    },
    getEncryptInfo(res, key, isShowKey) {
      this.$set(this.record, key, res.data.record[0][key]);
      this[isShowKey] = false;
    },
    // 接口是否要修改?
    handleExportAll() {
      this.isBatchExportShow = true;
    },
    // 接口是否要修改?
    handleExport() {
      if (!this.selectedList.length) {
        this.$message.warning(this.$t("common.notSelectRecord"));
        return;
      }
      this.isSingleExportShow = true;
    },
    // 接口是否要修改?
    async confirmSingle(form) {
      if (this.singleStep === 1) {
        this.isSingleExportShow = false;
        this.zippasswd = "";
        this.singleStep = 0;
        return;
      } else {
        const { curuser_pwd } = form;
        const res = await validatePwd({ userpasswd: curuser_pwd });
        if (res.code === 0) {
          const params = {
            img_ids: this.selectedList.map((item) => item.img_id).join(","),
            lib_id: this.lib_id,
          };
          const res = await exportStaffList(params);
          this.singleStep = 1;
          this.zippasswd = res.data.zippasswd;
          downLoadUrl(res.data.export_url);
        }
      }
    },
    cancelSingle() {
      this.singleStep = 0;
      this.zippasswd = "";
    },
    async confirmBatch(form) {
      // 验证密码
      if (this.batchStep === 0) {
        const { curuser_pwd } = form;
        const res = await validatePwd({ userpasswd: curuser_pwd });
        if (res.code === 0) {
          this.batchStep = 1;
        }
      } else {
        const params = {
          lib_id: this.lib_id,
          ...this.formData,
          channels:
            (this.formData.channels && this.formData.channels.join(",")) ||
            void 0,
          ...form,
        };
        const res = await exportBatchStaffList(params);
        if (res.code === 0) {
          this.zippasswd = res.data.zippasswd;
          downLoadUrl(res.data.export_url);
        }
      }
    },
    cancelBatch() {
      this.batchStep = 0;
      this.zippasswd = "";
    },
    handleSelectAll(val) {
      this.cardList.forEach((item) => {
        this.$set(item, "isSelect", val);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.greyRecord {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  padding: 20px;
  .divider {
    width: 100%;
    height: 2px;
    background-color: rgba(217, 222, 229, 1);
    margin-top: 30px;
    margin-bottom: 30px;
    flex-shrink: 0;
  }
  .content {
    .v-divider {
      background-color: rgba(217, 222, 229, 1);
      width: 2px;
      height: 845px;
      margin-left: 30px;
      margin-right: 30px;
    }
    &-left {
      width: 250px;
      &-detailinfo {
        height: 220px;
        span:first-child {
          display: inline-block;
          width: 80px;
          text-align: right;
          margin-right: 20px;
        }
      }
      /deep/ .el-icon-back {
        font-size: 22px;
        margin-bottom: 10px;
        color: #77a1e8;
        cursor: pointer;
      }
    }
    &-right {
      flex: 1;
    }
  }
}
</style>
